<template>
	<view>
		<view class="boxs">
			<view class="logo">
				<view>店铺logo</view>
				<image :src="baseurl+logo" mode="aspectFill" @click="uploadLogo"></image>
			</view>
			<view class="more">
				<view>店铺名称</view>
				<input type="text" placeholder="请输入店铺名称" v-model="shopName" />
			</view>
			<view class="more" @click="get">
				<view>店铺地址</view>
				<view style="width: 400rpx;text-align: right;">{{shopAddress}}</view>
				<!-- <input type="text" placeholder="请输入店铺地址" v-model="shopAddress" /> -->
			</view>
			<view class="more">
				<view>店铺电话</view>
				<input type="number" placeholder="请输入店铺电话" v-model="shopTel" />
			</view>
			<!-- 			<view class="more">
				<view>是否免配送费</view>
				<view>
					<view @click="delivery(1)">
						<image
							:src="is_ps_price==1?'https://www.lichu2025.cn/applet/common/choose_selects.png':'https://www.lichu2025.cn/applet/common/choose_normal.png'"
							mode="widthFix"></image>
						<view>是</view>
					</view>
					<view @click="delivery(0)">
						<image
							:src="is_ps_price==0?'https://www.lichu2025.cn/applet/common/choose_selects.png':'https://www.lichu2025.cn/applet/common/choose_normal.png'"
							mode="widthFix"></image>
						<view>否</view>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="more">
				<view>是否免打包费</view>
				<view>
					<view @click="pack(1)">
						<image
							:src="is_db_price==1?'https://www.lichu2025.cn/applet/common/choose_selects.png':'https://www.lichu2025.cn/applet/common/choose_normal.png'"
							mode="widthFix"></image>
						<view>是</view>
					</view>
					<view @click="pack(0)">
						<image
							:src="is_db_price==0?'https://www.lichu2025.cn/applet/common/choose_selects.png':'https://www.lichu2025.cn/applet/common/choose_normal.png'"
							mode="widthFix"></image>
						<view>否</view>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="more" v-if="is_db_price==0">
				<view>打包费</view>
				<input type="decimal" placeholder="请输入打包费" v-model="price" />
			</view>
			<view class="more" v-if="is_db_price==0">
				<view>店铺营业日期</view>
				<input type="decimal" placeholder="请输入(例:周一至周日)" v-model="store_date" />
			</view>
			<view class="more" v-if="is_db_price==0">
				<view>店铺营业开始时间</view>
				<input type="decimal" placeholder="请输入(例:9:00)" v-model="start_time" />
			</view>
			<view class="more" v-if="is_db_price==0">
				<view>店铺营业结束时间</view>
				<input type="decimal" placeholder="请输入(例:21:00)" v-model="end_time" />
			</view> -->
			<view class="more">
				<view>店铺营业开始时间</view>
				<input type="decimal" placeholder="请输入(例:9:00)" v-model="start_time" />
			</view>
			<view class="more">
				<view>店铺营业结束时间</view>
				<input type="decimal" placeholder="请输入(例:21:00)" v-model="end_time" />
			</view>
		</view>
		<view class="box-img">
			<view class="img-title">店铺介绍</view>
			<view class="img-more">
				<textarea placeholder="请输入店铺介绍" placeholder-class="" v-model="notice"></textarea>
			</view>
		</view>
		<view class="box-img">
			<view class="img-title">店铺相册</view>
			<view class="img-more">
				<view class="sview" @click="uploads">+</view>
				<view class="add-img" v-for="(img,ci) in bgimg" :key="ci">
					<view class="delete" @click="close(ci)">x</view>
					<image :src="baseurl+img" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="null"></view>
		<view class="bc" @click="save">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName: '',
				shopAddress: '',
				shopTel: '',
				logo: '',
				bgimg: [],
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				notice: '',
				is_ps_price: 0,
				is_db_price: 0,
				price: '',
				shi_ma: {},
				qu_ma: {},
				cityCode: 0,
				areaCode: 0,
				lat: '',
				lng: '',
				city: '',
				store_date: '',
				start_time: '',
				end_time: '',
			}
		},
		onLoad() {
			this.app.post('/api/shop/shop_info').then(res => {
				console.log(res)
				this.shopName = res.shopname
				this.shopAddress = res.address
				this.shopTel = res.mobile
				this.logo = res.avatar
				this.bgimg = res.shop_image.split(',')
				this.notice = res.notice
				this.is_ps_price = 0
				this.is_db_price = 0
				this.price = 0
				this.lat = res.lat
				this.lng = res.lng
				this.store_date = res.store_date
				this.start_time = res.start_time
				this.end_time = res.end_time
				this.huoqudizhishuju()
			})
		},
		methods: {
			// shopAddress
			huoqudizhishuju() {
				if (Object.keys(this.shi_ma).length === 0 || Object.keys(this.qu_ma).length === 0) {
					uni.request({
						url: 'https://www.lichu2025.cn/api/increased/index/GetAreaList',
						method: 'post',
						header: {
							'token': uni.getStorageSync('wanlshop:user').token,
						},
						success: (res) => {
							console.log(res.data)
							if (res.res.code === 1) {
								let shi_ma = {},
									qu_ma = {}
								for (let item of res.data) {
									if (item.children) {
										for (let child of item.children) {
											shi_ma[child.name] = child.zip
											for (let c1 of child.children) {
												qu_ma[c1.name] = c1.zip
											}
										}
									}
								}
								this.shi_ma = shi_ma
								this.qu_ma = qu_ma
								this.getData(this.lat, this.lng)
							}
						}
					})
				}
			},
			get() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.shopAddress = res.address
						this.lat = res.latitude
						this.lng = res.longitude
						this.getData(res.latitude, res.longitude)
					}
				});
			},
			getData(latitude, longitude) {
				const url =
					`https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=S7JBZ-THWKU-YXQV4-BRO5H-TYJB6-XAB6Z`;
				uni.request({
					url,
					success: (res) => {
						if (res.data.status === 0) {
							// 提取城市信息
							console.log(res.data)
							this.city =
								`${res.data.result.address_component.province}/${res.data.result.address_component.city}/${res.data.result.address_component.district}`
							this.cityCode = this.shi_ma[res.data.result
								.address_component.city]
							this.areaCode = this.qu_ma[res.data.result
								.address_component.district]
						} else {
							console.error("逆地理编码失败", res.data.message);
							uni.showToast({
								title: "获取城市失败",
								icon: "none"
							});
						}
					},
					fail: (err) => {
						console.error("请求失败", err);
						uni.showToast({
							title: "网络错误",
							icon: "none"
						});
					}
				});
			},
			delivery(num) {
				this.is_ps_price = num
			},
			pack(num) {
				this.is_db_price = num
			},
			save() {
				this.app.post('/api/shop/update_shop', {
					avatar: this.logo,
					shopname: this.shopName,
					address: this.shopAddress,
					mobile: this.shopTel,
					shop_image: this.bgimg,
					notice: this.notice,
					is_ps_price: 0,
					is_db_price: 0,
					dabao_price: 0,
					lat: this.lat,
					lng: this.lng,
					city: this.city,
					pcode: this.cityCode,
					code: this.areaCode,
					store_date: 0,
					start_time: this.start_time,
					end_time: this.end_time,
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '修改成功',
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
				})
			},
			uploadLogo() {
				let url = getApp().globalData.baseurl;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						res.tempFilePaths.forEach((e, i) => {
							uni.showLoading({
								title: `正在上传\n ${i+1}/${res.tempFilePaths.length}张`
							})
							uni.uploadFile({
								url: 'https://www.lichu2025.cn/api/common/upload',
								filePath: e,
								name: 'file',
								header: {
									'token': uni.getStorageSync('wanlshop:user').token,
								},
								success: (res) => {
									uni.hideLoading()
									console.log(JSON.parse(res.data))
									this.logo = JSON.parse(res.data).data.url
								}
							})
						})
					}
				})
			},
			uploadBgimg() {
				let url = getApp().globalData.baseurl;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						res.tempFilePaths.forEach((e, i) => {
							uni.showLoading({
								title: `正在上传\n ${i+1}/${res.tempFilePaths.length}张`
							})
							uni.uploadFile({
								url: 'https://www.lichu2025.cn/api/common/upload',
								filePath: e,
								name: 'file',
								header: {
									'token': uni.getStorageSync('wanlshop:user').token,
								},
								success: (res) => {
									uni.hideLoading()
									console.log(JSON.parse(res.data))
									this.bgimg = JSON.parse(res.data).data.url
								}
							})
						})
					}
				})
			},
			uploads() {
				let url = getApp().globalData.baseurl;
				let that = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						res.tempFilePaths.forEach((e, i) => {
							uni.showLoading({
								title: `正在上传\n ${i+1}/${res.tempFilePaths.length}张`
							})
							uni.uploadFile({
								url: url + '/api/common/upload',
								filePath: e,
								name: 'file',
								success: (res) => {
									uni.hideLoading()
									console.log(JSON.parse(res.data))
									that.tmpimg.push(JSON.parse(res.data).data.url)
								}
							})
						})
					}
				})
			},
			// 删除图片
			close(e) {
				this.tmpimg.splice(e, 1)
			}
		}
	}
</script>

<style lang="scss">
	.boxs {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-color: #FFF;

		.logo {
			width: 630rpx;
			margin-left: 30rpx;
			height: 136rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}

			view {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.more {
			width: 630rpx;
			margin-left: 30rpx;
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1px solid #eee;

			view {
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 30rpx;
				margin-right: 20rpx;
			}

			input {
				font-size: 30rpx;
				color: #333333;
				text-align: right;
			}
		}
	}

	.bc {
		width: 690rpx;
		height: 82rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #84BD00;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		color: #FFF;
		font-size: 30rpx;
	}

	.box-img {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		background-color: #FFF;
		padding: 30rpx 0;
		border-radius: 20rpx;

		.img-title {
			font-size: 30rpx;
			margin-left: 30rpx;
		}

		.img-more {
			width: 690rpx;
			margin-left: 30rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.sview {
				width: 170rpx;
				height: 170rpx;
				background: #FAFAFA;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 100rpx;
				margin-top: 30rpx;
				margin-right: 26rpx;
				color: #999;
			}

			.add-img {
				width: 170rpx;
				height: 170rpx;
				margin-top: 30rpx;
				border-radius: 10rpx;
				margin-right: 26rpx;
				position: relative;

				.delete {
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					z-index: 999;
					font-size: 45rpx;
				}
			}

			image {
				width: 170rpx;
				height: 170rpx;
			}
		}
	}

	.null {
		width: 750rpx;
		height: 150rpx;
	}
</style>